<template>
	<view class="main-cont">
		<view class="top box box-align-center">
			<view class="tab" :class="{active:current == index}" v-for="(item,index) in tabList" :key="index"
				@click="changeTab(index)">
				{{item}}
			</view>
		</view>
		<view class="cont" v-show="current == 0">
			<view class="" v-if="ryData.length!=0">
				结课证书：{{ryData.length}}
			</view>
			<view v-if="ryData.length!=0">
				<view class="list box box-align-center box-pack-between mt10" v-for="(item,index) in ryData"
					:key="index">
					<view class="box box-align-center">
						<u-image src="@/static/class/icon_zs.png" width="78rpx" height="78rpx"></u-image>
						<view class="box box-tb ml5">
							<view class="box box-align-center">
								<view class="zs-name">
									{{item.name}}
								</view>
								<view class="show-zs ml5" @click="previewImage(item)">
									查看证书
								</view>
							</view>
							<!-- <view class="tr">
								颁发人：{{item.tr}}
							</view> -->
						</view>
					</view>
					<view class="circle box box-align-center box-pack-center">
						已获证书
					</view>
				</view>
			</view>
			<no-data title="还未获取证书" v-else></no-data>
		</view>
		<view class="cont" v-show="current == 1">
			<view class="" v-if="ryData.length!=0">
				荣誉证书：{{ryData.length}}
			</view>
			<view v-if="ryData.length!=0">
				<view class="list box box-align-center box-pack-between mt10" v-for="(item,index) in ryData"
					:key="index">
					<view class="box box-align-center">
						<u-image src="@/static/class/icon_zs.png" width="78rpx" height="78rpx"></u-image>
						<view class="box box-stb ml5">
							<view class="box box-align-center">
								<view class="zs-name">
									{{item.name}}
								</view>
								<view class="show-zs ml5" @click="previewImage(item)">
									查看证书
								</view>
							</view>
							<!-- <view class="tr">
								颁发人：{{item.tr}}
							</view> -->
						</view>
					</view>
					<view class="circle box box-align-center box-pack-center">
						已获证书
					</view>
				</view>
			</view>
			<no-data title="还未获取证书" v-else></no-data>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: ['结课证书'],
				current: 0,
				ryData: [],
				user: uni.getStorageSync('user'),
			}
		},
		onLoad(opt) {
			console.log(opt);
			this.stuXqbg()
		},
		methods: {
			stuXqbg(){
				console.log(this.user);
				let opts = {
					url: '/ycert/stuCertList',
					method: 'post'
				};
				let params = {
					userid:this.user.id,
					type:1
				};
				console.log(params);
				this.$api.post(opts, params).then(res => {
					console.log(res);
					if(res.code == 0){
						this.ryData = res.list
					}
					
				})
			},
			changeTab(index) {
				this.current = index
			},
			previewImage(item) {
				console.log(item);
				uni.navigateTo({
					url:'/stuPageMy/zsDetail?id='+item.id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.main-cont {
		width: 100%;
		height: 100%;
	}

	.top {
		background-color: #fff;
	}

	.tab {
		flex: 1;
		height: 82rpx;
		line-height: 82rpx;
		text-align: center;

		&.active:after {
			content: '';
			width: auto;
			width: 97rpx;
			height: 11rpx;
			background: #7C79F5;
			border-radius: 4px;
			display: block;
			margin: 0 auto;
			margin-top: -5rpx;
			z-index: 111111;
		}

	}

	.cont {
		margin: 20rpx 14rpx;


		.list {
			padding-left: 26rpx;
			position: relative;
			width: 722rpx;
			height: 138rpx;
			background: #FFFFFF;
			box-shadow: 0px 23rpx 46rpx 0px rgba(207, 210, 243, 0.15);
			border-radius: 20rpx;
			overflow: hidden;

			.show-zs {
				font-size: 22rpx;
				color: #626BF1;
			}

			.tr {
				font-size: 22rpx;
				color: #5F6572;
			}

			.zs-name {
				font-size: 32rpx;
				font-weight: blod;
			}

			.circle {
				position: absolute;
				bottom: -28rpx;
				right: -20rpx;
				width: 130rpx;
				height: 130rpx;
				border: 4rpx solid #F2A6A6;
				border-radius: 50%;
				transform: rotate(15deg);
				font-size: 24rpx;
				color: #F2A6A6;
			}
		}
	}
</style>
